<template>
	<view class="box" :style="{'padding-top':systemHeight+15+'px'}">
		<image class="bg" src="/static/img/bg_1.png"></image>
		<view class="head">
			<image class="avatar" src="/static/img/driver.png" @click="openPopup()"></image>
			<image class="logo_icon" src="/static/img/map_logo.png"></image>
			<view class="right"></view>
		</view>
		<view class="lie">
			<view class="data">Today's data</view>
			<view class="open_depart">
				Depart
				<image class="button" src="/static/img/switch_open.png" @click="openStatus=false"
					v-if="openStatus==true"></image>
				<image class="button" src="/static/img/switch_close.png" @click="openStatus=true" v-else></image>
			</view>
		</view>
		<view class="nums_boxs">
			<view class="nums_box">
				<view><text>MK</text>690</view>
				<view class="nums_box_bottom">Income</view>
			</view>
			<view class="nums_box">
				<view>6<text>km</text></view>
				<view class="nums_box_bottom">Mileage</view>
			</view>
			<view class="nums_box">
				<view>00:20:32</view>
				<view class="nums_box_bottom">Online duration</view>
			</view>
		</view>
		<view class="selects">
			<view class="select" @click="selectWhich=1" :class="{'on_select':selectWhich==1}">
				<view>Order Pool</view>
				<view class="select_on" v-if="selectWhich==1"></view>
				<view class="select_no" v-else></view>
			</view>
			<view class="select" @click="selectWhich=2" :class="{'on_select':selectWhich==2}">
				<view>Historical orders</view>
				<view class="select_on" v-if="selectWhich==2"></view>
				<view class="select_no" v-else></view>
			</view>
		</view>

		<!-- 汽车和摩托共用 -->
		<view class="content_box">
			<view class="content" v-for="item in 10">
				<view class="content_small_box">
					<!-- 摩托改为Motorcycle -->
					<view class="content_title">Local train</view>
					<view class="content_lie">
						<view class="circle"></view>
						<view>Starting point positioning name</view>
					</view>
					<view class="line"></view>
					<view class="content_lie">
						<view class="circle orther_cirlce"></view>
						<view>Destination Address</view>
					</view>
					<view class="time">3.9 km, 10-minute trip</view>
					<view class="status" v-if="selectWhich==1" @click="startDriver()">Cartridge</view>
					<view class="status_right" v-if="selectWhich==2">Completed</view>
					<view class="right_bottom">
						<view class="estimate">Estimate</view>
						<view class="money">MK8000 </view>
					</view>
				</view>
				<view class="pay_status" v-if="selectWhich==2">
					<view class="pay_status_text">Payment platform required</view>
					<view class="pay_status_money"><text>MK</text>1000</view>
					<view class="payment_button">payment</view>
				</view>
				<view class="pay_status" v-if="selectWhich==2">
					<text>The amount has been deducted commission and
						MK1000 have been transferred to your wallet</text>
				</view>
			</view>
		</view>

		<view class="popup_modal" v-if="showLeft" @click="showLeft = false">
			<view class="popup_card">
				<view class="user_box flex_between" @click="goProfle('1')">
					<view class="user_name">Name</view>
					<image class="user_img" src="/static/img/driver.png"></image>
				</view>

				<view class="set_list">
					<view class="set_list_row flex_left" v-for="item in setList" :key="item.id" @click="goPage(item)">
						<image class="set_img" :src="'/static/img/' + item.icon"></image>
						<view class="set_name">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemHeight: null,
				openStatus: false,
				//1是左，2是右
				selectWhich: '1',
				setList: [{
						id: '1',
						icon: 'wallet_pay.png',
						name: 'Wallet',
						path: '/pages/promotion/myPromotion?type=2'
					},
					{
						id: '2',
						icon: 'mine_driver.png',
						name: 'My certification',
						path: '/pages/myProfle/driverJoin'
					},
					{
						id: '3',
						icon: 'mine_safe.png',
						name: 'SecCenter',
						path: '/pages/setting/SecCenter'
					},
					{
						id: '4',
						icon: 'mine_feedback.png',
						name: 'Complain',
						path: '/pages/setting/Complaint'
					},
					{
						id: '5',
						icon: 'mine_serve.png',
						name: 'Customer Service',
						path: '/pages/setting/customer'
					},
					{
						id: '6',
						icon: 'mine_help.png',
						name: 'Help',
						path: '/pages/setting/help'
					},
					{
						id: '7',
						icon: 'mine_set.png',
						name: 'Setting',
						path: '/pages/setting/setting'
					}
				],
				showLeft: true
			}
		},
		created() {
			this.systemHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			// 展示侧边栏
			openPopup() {
				this.showLeft = true
			},
			startDriver(){
				this.utils.To('/pages/pay/driverDetail')
			},
			// 跳转方法
			goPage(val) {
				this.utils.To(val.path)
			},
			goProfle(type) {
				uni.navigateTo({
					url: `/pages/myProfle/myProfle?type=${type}`
				})
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	.box {
		background: #FCFCFC;
		position: relative;
		position: fixed;
		width: 100%;
		height: 100vh;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 480rpx;
	}

	.head {
		width: 92%;
		margin: 0rpx auto 43rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: Mont;
		font-weight: bold;
		font-size: 40rpx;
		color: #0E0E0E;
	}

	.avatar {
		width: 92rpx;
		height: 92rpx;
	}

	.logo_icon {
		width: 140rpx;
		height: 32rpx;
	}

	.right {
		width: 92rpx;
	}

	.lie {
		width: 92%;
		margin: 0rpx auto 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: Mont;
		font-weight: bold;
		font-size: 30rpx;
		color: #0F1412;
	}

	.open_depart {
		display: flex;
		align-items: center;
	}

	.button {
		margin-left: 30rpx;
		width: 70rpx;
		height: 36rpx;
	}

	.nums_boxs {
		width: 80%;
		margin: 0rpx auto 82rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: Mont;
		font-weight: bold;
		font-size: 42rpx;
	}

	.nums_box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nums_box text {
		font-size: 24rpx;
	}

	.nums_box_bottom {
		margin-top: 30rpx;
		font-family: Mont;
		font-weight: 500;
		font-size: 20rpx;
		color: #0F1412;
	}

	.selects {
		box-sizing: border-box;
		width: 80%;
		margin: 0rpx auto 23rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: Mont;
		font-weight: 500;
		font-size: 28rpx;
		color: #101010;
	}

	.select {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.on_select {
		color: #33BA78;
	}

	.select_on {
		margin-top: 10rpx;
		width: 46rpx;
		height: 8rpx;
		background: #33BA78;
		border-radius: 4rpx;
	}

	.select_no {
		margin-top: 10rpx;
		width: 46rpx;
		height: 8rpx;
	}

	.content_box {
		overflow: auto;
		height: 60vh;
	}

	.content {
		box-sizing: border-box;
		padding: 41rpx;
		margin: 0rpx auto 18rpx;
		position: relative;
		width: 92%;
		background: #FFFFFF;
		box-shadow: -10rpx -1rpx 50rpx 0rpx rgba(55, 55, 55, 0.08);
		border-radius: 30rpx;
	}

	.content_small_box {
		position: relative;
	}

	.content_title {
		font-family: Mont;
		font-weight: bold;
		font-size: 36rpx;
		margin-bottom: 34rpx;
	}

	.content_lie {
		display: flex;
		align-items: center;
		font-family: Mont;
		font-weight: 500;
		font-size: 28rpx;
	}

	.circle {
		width: 18rpx;
		height: 18rpx;
		background: #FFAA44;
		border-radius: 9rpx;
		margin-right: 22rpx;
	}

	.orther_cirlce {
		background: #33BA78;
	}

	.line {
		width: 1rpx;
		height: 53rpx;
		border-radius: 1rpx;
		border-left: 1px dashed #7A7A7A;
		margin-left: 8rpx;
	}

	.time {
		margin: 46rpx 0 0rpx;
		font-family: Mont;
		font-weight: 600;
		font-size: 32rpx;
	}

	.status {
		top: 0rpx;
		right: 0rpx;
		position: absolute;
		width: 180rpx;
		height: 70rpx;
		background: #FFAA44;
		border-radius: 20rpx;
		font-family: Mont;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 70rpx;
	}

	.status_right {
		top: 0rpx;
		right: 0rpx;
		position: absolute;
		font-family: Mont;
		font-weight: 500;
		font-size: 24rpx;
		color: #6D6D6D;
	}

	.right_bottom {
		bottom: 10rpx;
		right: 20rpx;
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: end;
	}

	.estimate {
		font-family: Mont;
		font-weight: 500;
		font-size: 20rpx;
		color: #787878;
		margin-bottom: 10rpx;
	}

	.money {
		font-family: Mont;
		font-weight: bold;
		font-size: 24rpx;
	}

	.pay_status {
		padding-top: 30rpx;
		border-top: 1rpx solid #F4F4F4;
		position: relative;
		margin: 40rpx auto 0rpx;
	}

	.pay_status text {
		font-family: Mont;
		font-weight: 500;
		font-size: 24rpx;
		color: #515151;
		opacity: 0.5;
	}

	.pay_status_text {
		font-family: Mont;
		font-weight: 500;
		font-size: 28rpx;
		color: #515151;
		margin-bottom: 23rpx;
	}

	.pay_status_money {
		font-family: Mont;
		font-weight: bold;
		font-size: 36rpx;
	}

	.pay_status_money text {
		font-size: 24rpx;
		font-family: Mont;
		font-weight: bold;
		font-size: 24rpx;
		opacity: 1;
	}

	.payment_button {
		position: absolute;
		top: 50rpx;
		right: 0;
		width: 162rpx;
		height: 50rpx;
		background: #34BA78;
		border-radius: 12rpx;
		font-family: Mont;
		font-weight: bold;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 50rpx;
	}

	.popup_modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		z-index: 99;
	}

	.popup_card {
		position: absolute;
		left: 0;
		top: 0;
		width: 510rpx;
		height: 100%;
		background: #D8E5DF;
	}

	.user_box {
		margin-top: 90rpx;
		padding: 50rpx;
	}

	.user_name {
		font-weight: 900;
		font-size: 34rpx;
		color: #0E0E0E;
	}

	.user_img {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
	}

	.set_list {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 510rpx;
		height: 82%;
		overflow: scroll;
		background: #FFFFFF;
	}

	.set_list_row {
		padding: 0 50rpx;
		width: 70%;
		height: 100rpx;
	}

	.set_img {
		width: 38rpx;
		height: 38rpx;
		margin-right: 30rpx;
	}

	.set_name {
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
	}
</style>